


Twitter Template for AO3 (newest layout)

by RATTLEBONES



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: Completed
Published: 2020-10-02
Updated: 2020-10-02
Packaged: 2021-03-07 21:20:44
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,732
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/26754208
Author URL: https://archiveofourown.org/users/RATTLEBONES/pseuds/RATTLEBONES
Summary: This is a tutorial on how to create Twitter templates for AO3.- Scalable so it's also accessible to mobile users.- Features include: text, quote, photo(s), and replies.- Please let me know if there are bugs and/or requests.
Comments: 5
Kudos: 41
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works





	Twitter Template for AO3 (newest layout)

barry   
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

* * *

**23.3K** Retweets **924** Quote Tweets **72.1K** Likes

* * *

# Step 1: Import the Workskin

Workskins are pieces of code (stylesheets) that allow you to change the formatting of your work. Go to [My Dashboard] > [Skins] > [My Work Skins] > [Create Work Skin]. In the CSS area, paste this:
    
    
    #workskin .twt {
      float: center;
      max-width: 500px;
      min-width: 300px;
      margin: 0em auto;
      padding: 20px;
      padding-bottom: 0px;
      overflow: hidden;
      border: 1px solid #c7c7c7;
      border-radius: 5px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    }
    
    #workskin .twticonreply {
      margin-top: 0.5em;
    }
    
    #workskin .twticon {
      margin-top: -1.5em;
    }
    
    #workskin .twticon,
    #workskin .twticonreply {
      border-radius: 50%;
      width: 3.5em;
      float: left;
    }
    
    #workskin .twticonquote {
      overflow: auto;
      border-radius: 50%;
      float: left;
      width: 1.5em;
      margin-top: -0.7em;
    }
    
    #workskin .twt-id {
      padding-left: 65px;
      font-size: 1em;
      margin-top: -15px;
    }
    
    #workskin .twt-idquote {
      padding-left: 35px;
      font-size: 0.7em;
      margin-top: -15px;
    }
    
    #workskin .twtname {
      font-weight: bold;
    }
    
    #workskin .twtname:hover {
      text-decoration: underline;
      cursor: pointer;
    }
    
    #workskin .twtnamequote {
      padding-left: 35px;
      font-size: 0.8em;
    }
    
    #workskin .twthandle {
      color: #657786;
      font-size: 1em;
    }
    
    #workskin .twthandle:hover {
      cursor: pointer;
    }
    
    #workskin .twt-content {
      font-size: 1.3em;
      margin-top: -10px;
    }
    
    #workskin .twt-contentquote {
      font-size: 0.8em;
    }
    
    #workskin .twt-quotebox {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 35px;
      border: 1px solid #c7c7c7;
      border-radius: 10px;
    }
    
    #workskin .twtimage {
      float: center;
      margin-top: -10px;
      max-width: 100%;
      border: 1px solid #c7c7c7;
      border-radius: 10px;
    }
    
    #workskin .twt-replybox {
      width: auto;
    }
    
    #workskin .twt-replycontent {
      padding-left: 65px;
      margin-top: -15px;
      font-size: 1em;
    }
    
    #workskin .twt-share {
      background-image: url("https://i.imgur.com/iwGvFJY.png");
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      margin-top: -20px;
      margin-bottom: -10px;
    }
    
    #workskin .twthl {
      color: #1DA1F2;
    }
    
    #workskin .twthl:hover {
      text-decoration: underline;
      cursor: pointer;
    }
    
    #workskin .twt-smalltxt {
      color: #657786;
      font-size: 1em;
      margin-top: -10px;
      margin-bottom: -10px;
    }
    
    #workskin .twt-timestamp {
      color: #657786;
      font-size: 1em;
      margin-top: -35px;
    }
    
    #workskin .twt-smallertxt {
      color: #657786;
      position: absolute;
    }
    
    #workskin hr.sep1 {
      border: none;
      height: 1px;
      width: 100%;
      background-color: #c7c7c7;
    }
    
    #workskin hr.sep2 {
      border: none;
      height: 1px;
      width: 120%;
      margin-left: -30px;
      background-color: #c7c7c7;
    }
    

# Step 2: Adding Work Skin to your work

In order to use this workskin, you must first add it to your work. Create a new work or edit an existing one. Under 'Associations', at 'Select Work Skin', select the workskin you just imported. Now you can use it. You have to edit your chapters in HTML mode when you use a workskin. It is **strongly advised** to add these codes after you have completed your story. This is to minimize the chances of the code being messed up during editing.

## Plain tweet

barry   
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

* * *

**23.3K** Retweets **924** Quote Tweets **72.1K** Likes

* * *

HTML:
    
    
    <div class="twt"><img class="twticon" src="https://i.imgur.com/Q31haWS.jpg">  
    
    <div class="twt-id">  
    
    <p><span class="twtname">barry</span><br />  
    
    <span class="twthandle">@barrythebee</span></p>  
    
    </div>  
    
    <div class="twt-content"><p>According to all known laws of aviation, there is no way a bee should be able to fly...🐝</p></div>  
    
    <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>  
    
    <hr class="sep1"><div class="twt-smalltxt"><strong>23.3K</strong> Retweets &nbsp&nbsp <strong>924</strong> Quote Tweets &nbsp&nbsp <strong>72.1K</strong> Likes</div>  
    
    <hr class="sep1"><div class="twt-share">&nbsp</div>  
    
    </div>

Explanation:

**twticon** is your avatar  
 **twtname** is your display name, and **twthandle** is your @  
 **twt-content** is the body of your tweet

If you want to add a hashtag, use:
    
    
    <span class="twthl">#hashtag</span>

to get #forever

## Tweet with quote

barry   
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

donkey @donkey · Sept 5

i'm donkey!

8:14 AM · Oct 2, 2020

* * *

**23.3K** Retweets **924** Quote Tweets **72.1K** Likes

* * *

HTML:
    
    
    <div class="twt"><img class="twticon" src="https://i.imgur.com/Q31haWS.jpg">  
    
    <div class="twt-id">  
    
    <p><span class="twtname">barry</span><br />  
    
    <span class="twthandle">@barrythebee</span></p>  
    
    </div>  
    
    <div class="twt-content"><p>According to all known laws of aviation, there is no way a bee should be able to fly...🐝</p>  
    
    <div class="twt-quotebox"><img class="twticonquote" src="https://i.imgur.com/D0aVIAd.png" />  
    
    <div class="twt-idquote"><span class="twtname">donkey</span> <span class="twthandle">@donkey · Sept 5</span></div>  
    
    <div class="twt-contentquote"><p>i'm donkey!</p></div></div>  
    
    </div>  
    
    <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>  
    
    <hr class="sep1"><div class="twt-smalltxt"><strong>23.3K</strong> Retweets &nbsp&nbsp <strong>924</strong> Quote Tweets &nbsp&nbsp <strong>72.1K</strong> Likes</div>  
    
    <hr class="sep1"><div class="twt-share">&nbsp</div>  
    
    </div>

Explanation:

**twt-quotebox** is is where the quoted tweet is contained in  
 **twticonquote** is the small icon in the quoted tweet  
 **twt-idquote** is where the display name and handle of the quoted tweet is contained in  
 **twt-contentquote** is the content of the quoted tweet  
  


## Tweet with image(s)

barry   
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

* * *

**23.3K** Retweets **924** Quote Tweets **72.1K** Likes

* * *

HTML:
    
    
    <div class="twt"><img class="twticon" src="https://i.imgur.com/Q31haWS.jpg">  
    
    <div class="twt-id">  
    
    <p><span class="twtname">barry</span><br />  
    
    <span class="twthandle">@barrythebee</span></p>  
    
    </div>  
    
    <div class="twt-content"><p>According to all known laws of aviation, there is no way a bee should be able to fly...🐝</p>  
    
    <img class="twtimage" src="https://scx2.b-cdn.net/gfx/news/hires/2019/donkey.jpg" /></div>  
    
    <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>  
    
    <hr class="sep1"><div class="twt-smalltxt"><strong>23.3K</strong> Retweets &nbsp&nbsp <strong>924</strong> Quote Tweets &nbsp&nbsp <strong>72.1K</strong> Likes</div>  
    
    <hr class="sep1"><div class="twt-share">&nbsp</div>  
    
    </div>

Explanation: The setup of this code is similar to the previous one

 **twtimage** is where you insert the link to your image  
If you want to add more images, simply add the code 
    
    
    <img class="twtimage" src="/" />

as many times as needed.

## Tweet with replies

barry   
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

* * *

**23.3K** Retweets **924** Quote Tweets **72.1K** Likes

* * *

* * *

nobita  
Replying to @doraemon

this is a reply!

2 2 2

HTML:
    
    
    <div class="twt"><img class="twticon" src="https://i.imgur.com/Q31haWS.jpg">  
    
    <div class="twt-id"><p>  
    
    <span class="twtname">barry</span><br />  
    
    <span class="twthandle">@barrythebee</span></p>  
    
    </div>  
    
    <div class="twt-content"><p>According to all known laws of aviation, there is no way a bee should be able to fly...🐝</p></div>  
    
    <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>  
    
    <hr class="sep1"><div class="twt-smalltxt"><strong>23.3K</strong> Retweets &nbsp&nbsp <strong>924</strong> Quote Tweets &nbsp&nbsp <strong>72.1K</strong> Likes</div>  
    
    <hr class="sep1"><div class="twt-share">&nbsp</div>  
    
    <hr class="sep2"><div class="twt-replybox"><img class="twticonreply" src="https://i.imgur.com/GJB38Dv.jpg">  
    
    <div class="twt-id"><span class="twtname">nobita</span><br /><span class="twthandle">Replying to</span> <span class="twthl">@doraemon</span></div>  
    
    <div class="twt-replycontent"><p>this is a reply!</p>  
    
    <img src="https://i.imgur.com/1d75hTy.png" /><span class="twt-smallertxt">2</span> &nbsp&nbsp <img src="https://i.imgur.com/svKsQR8.png" /><span class="twt-smallertxt">2</span> &nbsp&nbsp<img src="https://i.imgur.com/06L7pZJ.png" /><span class="twt-smallertxt">2</span>  
    
    </div></div>  
    
    </div>  
    
    

Explanation:

The reply starts after 
    
    
    <hr class="sep2">
    

The rest works same as above.

To add another reply, simply copy this code and add it just **before the last </div>**:
    
    
    <hr class="sep2"><div class="twt-replybox"><img class="twticonreply" src="https://i.imgur.com/GJB38Dv.jpg">  
    
    <div class="twt-id"><span class="twtname">nobita</span><br /><span class="twthandle">Replying to</span> <span class="twthl">@doraemon</span></div>  
    
    <div class="twt-replycontent"><p>this is a reply!</p>  
    
    <img src="https://i.imgur.com/1d75hTy.png" /><span class="twt-smallertxt">2</span> &nbsp&nbsp <img src="https://i.imgur.com/svKsQR8.png" /><span class="twt-smallertxt">2</span> &nbsp&nbsp<img src="https://i.imgur.com/06L7pZJ.png" /><span class="twt-smallertxt">2</span>  
    
    </div></div>

## Tweet with everything!

If you are wondering whether you can combine all of those, yes, yes you can! Check out this behemoth:

nobita   
@n00bita

Best friends #forever

doraemon @doraemon · Sept 5

Another one!

8:14 AM · Oct 2, 2020

* * *

**23.3K** Retweets **924** Quote Tweets **72.1K** Likes

* * *

* * *

nobita  
Replying to @doraemon

this is a reply!

2 2 2

HTML:
    
    
    <div class="twt"><img class="twticon" src="https://i.imgur.com/GJB38Dv.jpg">  
    
    <div class="twt-id">  
    
    <p><span class="twtname">nobita</span><br />  
    
    <span class="twthandle">@n00bita</span></p>  
    
    </div>  
    
    <div class="twt-content"><p>Best friends <span class="twthl">#forever</span></p>  
    
    <img class="twtimage" src="https://freegametips.com/wp-content/uploads/2019/11/1573594992_Doraemon-Nobita39s-New-Dinosaur-arrives-in-2020-on-Switch-1200x900.jpg" />  
    
    <div class="twt-quotebox"><img class="twticonquote" src="https://i.imgur.com/NzmiXOw.jpg" />  
    
    <div class="twt-idquote"><span class="twtname">doraemon</span> <span class="twthandle">@doraemon · Sept 5</span></div>  
    
    <div class="twt-contentquote"><p>Another one!</p>  
    
    <img class="twtimage" src="https://media1.tenor.com/images/434bedd934f43e68f4d5392ba78174f8/tenor.gif" /></div></div>  
    
    </div>  
    
    <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>  
    
    <hr class="sep1"><div class="twt-smalltxt"><strong>23.3K</strong> Retweets &nbsp&nbsp <strong>924</strong> Quote Tweets &nbsp&nbsp <strong>72.1K</strong> Likes</div>  
    
    <hr class="sep1"><div class="twt-share">&nbsp</div>  
    
    <hr class="sep2"><div class="twt-replybox"><img class="twticonreply" src="https://i.imgur.com/GJB38Dv.jpg">  
    
    <div class="twt-id"><span class="twtname">nobita</span><br /><span class="twthandle">Replying to</span> <span class="twthl">@doraemon</span></div>  
    
    <div class="twt-replycontent"><p>this is a reply!</p>  
    
    <img class="twtimage" src="https://i.pinimg.com/originals/e0/bc/b1/e0bcb1ce0dbbacade677fa52788cf005.jpg" />  
    
    <img src="https://i.imgur.com/1d75hTy.png" /><span class="twt-smallertxt">2</span> &nbsp&nbsp <img src="https://i.imgur.com/svKsQR8.png" /><span class="twt-smallertxt">2</span> &nbsp&nbsp<img src="https://i.imgur.com/06L7pZJ.png" /><span class="twt-smallertxt">2</span>  
    
    </div></div>  
    
    </div>

Explanation:

This looks daunting but it's basically the same things as above, but combined into one. I would advise not to use this too often, as it can be overwhelming.

## Final Notes

That's it, I hope it was clear! If you have any bugs/questions/suggestions, please let me know!


End file.
